<template>
	<view class="flex-col page">





		<view class="flex-col section" v-if="order">
		  <view class="flex-row justify-between items-center">
		    <view class="flex-row items-center detail_space-x-6">
		      <view class="flex-col justify-start items-center shrink-0 text-wrapper">
		        <text class="detail_font_1 detail_text_5"v-id="order.urgentStatus">加急</text>
		      </view>
		      <text class="detail_font_4 detail_text_6">{{order.sendCity }}</text>
		      <image
		        class="shrink-0 detail_image_5"
		        src="https://qiniu.ccchongya.com/chongya/images/16967453049998047425.png"
		      />
		      <text class="detail_font_4 detail_text_7">{{order.receiveCity }}</text>
		    </view>
		    <text class="detail_text_8">发布时间：{{order.buyTime  | time}}</text>
		  </view>
		  <view class="flex-col detail_group_3">
		    <view class="flex-row start items-center align-center  ">
				<view class="flex-row items-center self-start  detail_space-x-10">
				  <image
					src="https://qiniu.ccchongya.com/chongya/images/16967453046667844800.png"
				  />
				</view>
				  <view class="flex-row  items-center detail_space-x-10" style="flex:2;padding:0 0 0 20rpx;">
					<view class="flex-col items-start detail_space-y-16">
					  <text class="detail_font_1">宠物类型：{{order.petType}}</text>
					  <text class="detail_font_1">宠物体积：{{order.petVolume}}</text>
					  <text class="detail_font_1">期望运输方式：{{order.haulMethod}}</text>
					</view>
				  </view>
				  <view class="flex-col items-start detail_space-y-16">
					<text class="detail_font_1">检疫证书：{{order.jianyiCert?"有":'无'}}</text>
					<text class="detail_font_1">笼具大小：{{order.cageSize}}</text>
					  <text class="detail_font_1">接送服务：{{order.shuttle}}</text>
				  </view>
		    </view>
		    <view class="flex-row justify-center detail_group_4 detail_space-x-10">
		    </view>
		  </view>




		<text class="self-start font_1 text_5">报价信息</text>
		<view class="flex-col group_4 view"
		@click="go('/pages/ys/order/shop?orderNo='+orderNo)"
		 style="background:#FFBD52;padding:20rpx;border-radius: 20rpx;border: 1px solid #e5e5e5;">
			<view class="flex-row justify-between align-center">
				<view class="flex-row items-center   ">
				   <text class="" style="">查看商家报价</text>
				</view>
				<view class="flex-row justify-between items-center">
				    <text style="margin:0 10rpx;padding: 4rpx 16rpx;background: red;color: #fff;border-radius: 20rpx;">8</text>个 >
				</view>
			</view>
		</view>



		</view>

<view v-if="order != ''" class="bg-color-w padding-12 b-radius-5 margin-b12">
				<view class="f-w-b f15-size" :style="{'color': orderState[order.status]['color']}">{{orderState[order.status]['text']}}</view>
				<view class=" flex f-a-c">
					<uni-countdown class="margin-t6" v-if="orderState[order.status]['value'] == 'dhx' && autoGetGoods > 0"  color="#9B9B9B" splitorColor="#9B9B9B" :font-size="11" :second="autoGetGoods" />
					<uni-countdown class="margin-t6" v-if="orderState[order.status]['value'] == 'dzf' && cancelTime > 0"  color="#9B9B9B" splitorColor="#9B9B9B" :font-size="11" :second="cancelTime" />
				</view>
				<view class="flex f-j-e f-w ">
					<view @click.stop="changeAddress()" class="flex f-a-c f-j-c f-s-0 w-80 h-30 margin-t12 margin-l12 b-radius-30 f12-size b-color-3 ">{{i18n['修改地址']}}</view>
					<view  @click.stop="cancelOrder()" class="flex f-a-c f-j-c f-s-0 w-80 h-30 margin-t12 margin-l12 b-radius-30 f12-size b-color-3 ">{{i18n['取消订单']}}</view>
					<view @click.stop="showWuliu()"  class="flex f-a-c f-j-c f-s-0 w-80 h-30 margin-t12 margin-l12 b-radius-30 f12-size b-color-3">{{i18n['查看物流']}}</view>
					<view @click.stop="showPay()"  class="flex f-a-c f-j-c f-s-0 w-80 h-30 margin-t12 margin-l12 b-radius-30 f12-size bg-color-linear-y t-color-w">{{i18n['立即支付']}}</view>
					<view  @click.stop="sureOrder()" class="flex f-a-c f-j-c f-s-0 w-80 h-30 margin-t12 margin-l12 b-radius-30 f12-size bg-color-linear-y t-color-w">{{i18n['确认收货']}}</view>
				</view>



		<view class="flex-col flex-auto group_2">
		<!-- 	<text class="self-start font_1 text_5">订单详情</text>

			<view class="flex-row   justify-between">
				<text class=" self-center font_2 text_3">订单编号：{{order.orderNo}}</text>
				<text class=" self-start font_2 text_3">下单时间：{{order.buyTime  | time}}</text>
			</view>

			<view class="flex-row   justify-between">
				<text class="self-center font_2 text_3">报价时间：{{order.buyTime  | time}}</text>
				<text class="self-start font_2 text_3">成交时间：{{order.buyTime  | time}}</text>
			</view>

			<view class="self<strong></strong>-start group_3">
				<text class="font_2">成交金额：</text>
				<text class="font_3 text_4">￥{{order.amount }}</text>
			</view> -->
			<view class="bg-color-w b-radius-5  margin-b12">
					<view class="flex f-j-s margin-b10">
						<view class="flex f-a-c ">
							<text class="f-w-500 t-color-3 margin-r4 ">货物情况</text>
						</view>
					</view>

			   <view class="flex-col addressBox">
			   			<view class="flex-row justify-between items-center addressBoxDetail">
			   				<view class="flex-row items-center space-x-14">


			   					<block >
			   						<view class="flex-col justify-start items-center text-wrapper_2">
			   							<text	class="icontext">发</text>
			   							</view>
			   						<view class="flex-col space-y-12">
			   							<view class="flex-row space-x-6">
			   								<text class="contfont">{{order.sendAddress}}</text>
			   								<text class="contfont"></text>
			   							</view>
			   							<!-- <text	class="self-start contenttext">填写邮寄人地址信息</text> -->
			   						</view>
			   					</block>
			   				</view>
			   				<!-- <text class="contenttext">常用地址</text> -->
			   			</view>
			   			<view class="flex-row justify-between items-center addressBoxDetail view">
			   				<view class="flex-row items-center space-x-14">
			   					<block >
			   						<view class="flex-col justify-start items-center text-wrapper_3">
			   							<text class="icontext">收</text>
			   						</view>
			   						<view class="flex-col space-y-12">
			   							<view class="flex-row space-x-6">
			   								<text class="contfont">{{order.receiveAddress}}
											</text>
			   								<text	class="contfont"></text>
			   							</view>
			   							<!-- <text class="self-start contenttext">填写发出人地址信息</text> -->
			   						</view>
			   					</block>
			   				</view>
			   				<!-- <text class="contenttext">常用地址</text> -->
			   			</view>


			   	</view>




		<!-- 	<text class="self-start font_4 text_6">发货地址：</text>
			<view class="flex-col group_4 space-y-12">
				<view class="flex-row items-baseline space-x-6">
					<text class="font_2">代用名</text>
					<text class="font_2">13212121212</text>
				</view>
				<text class="self-start font_2">湖北省宜昌市沿江大道的188号</text>
			</view>
			<text class="self-start font_4 text_7">收货地址：</text>
			<view class="flex-col group_4 space-y-12">
				<view class="flex-row items-baseline space-x-6">
					<text class="font_2">代用名</text>
					<text class="font_2">13212121212</text>
				</view>
				<text class="self-start font_2">湖北省宜昌市沿江大道的188号</text>
			</view> -->





			<view class="flex-col group_4 view">
			<!-- 	<view class="flex-row justify-between">
					<text class="font_3">宠物类型</text>
					<text class="font_3 text_8">{{order.petType}}</text>
				</view>
				<view class="flex-row justify-between">
					<text class="font_3">宠物体积</text>
					<text class="font_3 text_9">{{order.petVolume}}</text>
				</view>
				<view class="flex-row justify-between">
					<text class="font_3">是否加急</text>
					<text class="font_3 text_10">{{order.urgentStatus?"加急":'不加急'}}</text>
				</view>
				<view class="flex-row justify-between">
					<text class="font_3">是否保险</text>
					<text class="font_3 text_11">{{order.insure?"有":'无'}}</text>
				</view>
				<view class="flex-row justify-between">
					<text class="font_3">检疫证书</text>
					<text class="font_3 text_12">{{order.jianyiCert?"有":'无'}}</text>
				</view>
				<view class="flex-row justify-between">
					<text class="font_3">接送服务</text>
					<text class="font_3 text_13">{{order.shuttle}}</text>
				</view> -->
				<!-- <view class="flex-row justify-between">
					<text class="font_3">增值服务</text>
					<text class="font_3 text_13">{{order.addServiceMethod}}</text>
				</view> -->


			<!-- 	<view class="flex-row justify-between">
					<text class="font_3">期望出发时间</text>
					<text class="font_3">2023-8-20 12:00</text>
				</view> -->
			<!-- 	<view class="flex-row justify-between">
					<text class="font_3">拖运方式</text>
					<text class="font_3 text_14">{{order.haulMethod}}</text>
				</view> -->
			<view class="flex-row justify-between">
				<text class="font_3">宠物照片</text>
				<text class="font_3 text_15"></text>
			</view>
			<view class="flex-col justify-between">
				<view class="flex-col  justify-between">
					<text class="self-start font_1 text_14"></text>
					<view class="flex-row equal-division justify-between items-start">
						<view class="flex-col items-center section_9 equal-division-item space-y-26">
								<image class="image_11" v-if="order.petPhoto[0]" :src="order.petPhoto[0]" />
						</view>

						<view class="flex-col items-center section_9 equal-division-item space-y-26" >
								<image class="image_11" v-if="order.petPhoto[1]" :src="order.petPhoto[1]" />
						</view>

						<view class="flex-col items-center section_9 equal-division-item space-y-26" >
								<image class="image_11" v-if="order.petPhoto[2]"  :src="order.petPhoto[2]" />
						</view>

					</view>
				</view>
				</view>
				<view class="flex-row justify-between">
					<text class="font_3">笼具照片</text>
					<text class="font_3 text_15"></text>
				</view>
				<view class="flex-col justify-between">
					<view class="flex-col  justify-between">
						<text class="self-start font_1 text_14"></text>
						<view class="flex-row equal-division justify-between items-start">
							<view class="flex-col items-center section_9 equal-division-item space-y-26">
									<image class="image_11" v-if="order.cagePhoto[0]" :src="order.cagePhoto[0]" />
							</view>

							<view class="flex-col items-center section_9 equal-division-item space-y-26" >
									<image class="image_11" v-if="order.cagePhoto[1]" :src="order.cagePhoto[1]" />
							</view>

							<view class="flex-col items-center section_9 equal-division-item space-y-26" >
									<image class="image_11" v-if="order.cagePhoto[2]"  :src="order.cagePhoto[2]" />
							</view>

						</view>
					</view>
				</view>



				<view class="flex-col justify-between">
					<text class="font_3">备注信息</text>
					<text class="font_3 text_17">{{order.remark}}</text>
				</view>
			</view>


			<view class="bg-color-w b-radius-5  margin-b12">
				<view class="flex f-j-s padding-tb6 f12-size">
					<text>{{i18n['商品总价']}}</text>
					<text class="text-price">{{order.totalPrice | price}}</text>
				</view>
				<view class="flex f-j-s padding-tb6 f12-size">
					<text>{{i18n['运费']}}</text>
					<text v-if="order.freightFee" class="text-price">{{order.freightFee | price}}</text>
					<text v-else class="text-price">0</text>
				</view>
				<view class="flex f-j-s padding-tb6 f12-size">
					<text>{{i18n['优惠']}}</text>
					<text class="text-price">{{order.couponAmount}}</text>
				</view>
				<view class="flex f-j-e f12-size t-color-y f-w-500 margin-t6">
					<text>{{i18n['实付款']}}：</text>
					<text class="text-price">{{order.payPrice | price}}</text>
				</view>
			</view>

			<view class="bg-color-w b-radius-5  margin-b12">
					<view class="flex f-j-s margin-b10">
						<view class="flex f-a-c ">
							<text class="f-w-500 t-color-3 margin-r4 ">{{i18n['订单详情']}}</text>
						</view>
					</view>
					<view class="flex f-a-c padding-tb6 f12-size">
						<text class="t-color-9 w-80">{{i18n['订单编号']}}：</text>
						<text class="">{{order.orderNo}}</text>
					</view>
					<view class="flex f-a-c padding-tb6 f12-size">
						<text class="t-color-9 w-80">{{i18n['支付交易号']}}：</text>
						<text class="">{{order.payOrderNo}}</text>
					</view>
					<view class="flex f-a-c padding-tb6 f12-size ">
						<text class="t-color-9 w-80">{{i18n['创建时间']}}：</text>
						<text class="">{{order.buyTime | time}}</text>
					</view>
					<view class="flex f-a-c padding-tb6 f12-size ">
						<text class="t-color-9 w-80">{{i18n['支付时间']}}：</text>
						<text class="">{{order.payTime | time}}</text>
					</view>
					<view v-if="order.deliveryTime" class="flex f-a-c padding-tb6 f12-size ">
						<text class="t-color-9 w-80">{{i18n['发货时间']}}：</text>
						<text class="">{{order.deliveryTime | time}}</text>
					</view>
					<view v-if="order.finishTime" class="flex f-a-c padding-tb6 f12-size ">
						<text class="t-color-9 w-80">{{i18n['完成时间']}}：</text>
						<text class="">{{order.finishTime | time}}</text>
					</view>
					<view class="b-bottom margin-t10"></view>
						<view @click="go('/pages/chat/chat?id='+shopMemberId+'&orderId='+order.id)" class="flex f-a-c f-j-c" style="padding-top: 10px;">
							<text class="flex f-a-c f-j-c van-icon van-icon-chat-o t-color-y margin-r4"></text>
							<text class="f12-size f-w-500">{{i18n['联系卖家']}}</text>
						</view>
				</view>
			</view>

			<view class="flex-col group_5">
				<text class="self-start font_1">商家信息</text>
				<view class="flex-row justify-between items-center group_6">
					<view class="flex-row">
						<image class="shrink-0 image_4"
							src="https://qiniu.ccchongya.com/chongya/images/16947555367038087956.png" />
						<view class="flex-col items-start shrink-0 self-center group_7">
							<text class="font_5">代用名</text>
							<text class="font_5">13212121212</text>
						</view>
						<text class="self-start font_5 text_18"><br /></text>
					</view>
					<image class="image_5 image_6"
						src="https://qiniu.ccchongya.com/chongya/images/16947555367102855177.png" />
				</view>
				<text class="self-start font_1 text_19">委托方信息</text>
			</view>
			<view class="flex-row justify-between items-center group_8">
				<view class="flex-row items-center space-x-8">
					<image class="image_7"
						src="https://qiniu.ccchongya.com/chongya/images/16947555367190226326.png" />
					<view class="flex-col items-start">
						<text class="font_5">代用名</text>
						<text class="font_5">13212121212</text>
					</view>
				</view>
				<image class="image_5 image_8"
					src="https://qiniu.ccchongya.com/chongya/images/16947555369275603829.png" />
			</view>
			<view class="flex-row group_9 space-x-14">
				<view class="flex-col justify-start items-center text-wrapper"><text class="font_14">收藏商家</text></view>
				<view class="flex-col justify-start items-center text-wrapper"><text class="font_14">打赏商家</text></view>
				<view class="flex-col justify-start items-center text-wrapper"><text class="font_14">追加费用</text></view>
			</view>
			<view class="flex-row justify-center items-center group_10 space-x-10">
				<image class="image_9"
					src="https://qiniu.ccchongya.com/chongya/images/16947555369465270686.png" />
				<text class="font_2 text_20">联系客服</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	const state = require('@/utils/api/state.js').default;

	let self;
	export default {
		components: {},
		props: {},
		computed: {
			i18n() {
				return this.$t('orderlist')
			},
		},
		data() {
			return {
				orderState: state.orderStatus,
				order:null,
				orderNo:"",

				petVolumeArray: ["小型", "中型", "大型", "都有"],
				petTypeArray: ["小狗", "小猫"],
				cageSizeArray: ["1平方", "0.5平方"],
				shuttleArray: ["上门接送", '约定地点'],
				haulMethodArray: ["宠物快车", "宠物空运", "铁路托运", "城市专线", "空调专车", "宠物客运"],
				addServiceMethodArray:['上门接宠','送宠到家','提供笼具'],
				petcatArray:[
					{
						id:1,
						title:'狗'
					},
					{
						id:2,
						title:'狗'
					},
					{
						id:3,
						title:'鼠'
					},
					{
						id:4,
						title:'龟'
					},
					{
						id:5,
						title:'鱼'
					},
					{
						id:6,
						title:'马'
					},
					{
						id:7,
						title:'其他'
					}
				],

			};
		},
		onLoad(options) {
				self = this;
			this.orderNo = options.orderNo;
			console.log("this.orderNo",this.orderNo)
			this.getDetail()
		},

		methods: {
			getDetail() {
				$.ajax({
					url: API.orderDetailApi,
					data: {
						orderNo: self.orderNo
					},
					method: 'GET',
					success(res) {
						self.order = res.data



						var petType_arr = [];
						var petTypes=self.order.petType.split(",")
						for (let i = 0; i < petTypes.length; i++) {
								for (let j = 0; j < self.petcatArray.length; j++) {
										if(self.petcatArray[j].id==petTypes[i]){
												petType_arr.push(self.petcatArray[j].title)
												continue;
										}
								}
						}
						self.order.petType = petType_arr.join(",")


						var petTypes=self.order.petType.split(",")
						for (let i = 0; i < petTypes.length; i++) {
								for (let j = 0; j < self.petcatArray.length; j++) {
										if(self.petcatArray[j].id==petTypes[i]){
												petType_arr.push(self.petcatArray[j].title)
												continue;
										}
								}
						}
						self.order.petVolume = self.petVolumeArray[self.order.petVolume]
						self.order.cageSize = self.cageSizeArray[self.order.cageSize]
						// self.order.shuttle = self.shuttleArray[self.order.shuttle]
						self.order.haulMethod = self.haulMethodArray[self.order.haulMethod]
						// self.order.addServiceMethod = self.addServiceMethodArray[self.order.shuttle]




						 self.order.petPhoto=self.order.petPhoto.split(",")
						 self.order.cagePhoto=self.order.cagePhoto.split(",")
						 console.log(self.order)



					}
				})
			}
		},
	};
</script>

<style>
	.addressBox {
		background-color: #ffffff;
		padding: 40rpx 0 ;
		margin-top:-1px
	}

	.addressBoxDetail {
		padding: 0 4rpx;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.addressBox .text-wrapper_2 {
		padding: 8rpx 0;
		background-color: #4578ff;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.icontext {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #ffffff;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.contenttext {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #666e7a;
	}

	.addressBox .view {
		margin-top: 40rpx;
	}

	.addressBox .text-wrapper_3 {
		padding: 8rpx 0;
		background-color: #43cf7c;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.addresstext {
		color: #081329;
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		line-height: 30rpx;
	}
</style>



<style scoped lang="css">
	@import url('../../../static/css/style.css');







	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.font_1 {
		font-size: 28rpx;
		/* line-height: 26rpx; */
		color: #000000;
		font-weight: 700;
	}

	.font_2 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #666e7a;
	}

	.group_2 {
		padding: 12rpx 28rpx 96rpx;
		overflow-y: auto;
	}

	.text_2 {
		margin-left: 4rpx;
	}

	.text_3 {
		margin-left: 4rpx;
		margin-top: 48rpx;
	}

	.group_3 {
		margin-left: 4rpx;
		margin-top: 48rpx;
		line-height: 22rpx;
	}

	.font_3 {
		font-size: 24rpx;
		line-height: 72rpx;
		color: #666e7a;
	}

	.text_4 {
		color: #ff5733;
		line-height: 18rpx;
	}

	.text_5 {
		margin-left: 4rpx;
		margin-top: 44rpx;
		font-weight: 700;
	}

	.font_4 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #000000;
	}
	.font_14 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #ffffff;
	}
	.text_6 {
		margin-left: 4rpx;
		margin-top: 24rpx;
		font-weight: 700;
	}

	.group_4 {
		margin-top: 24rpx;
		padding: 0 4rpx;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.text_7 {
		margin-left: 4rpx;
		margin-top: 60rpx;
		font-weight: 700;
	}


	.text_8 {
		margin-right: 8rpx;
	}

	.text_9 {
		margin-right: 8rpx;
	}

	.text_10 {
		margin-right: 8rpx;
	}

	.text_11 {
		margin-right: 8rpx;
	}

	.text_12 {
		margin-right: 8rpx;
	}

	.text_13 {
		margin-right: 8rpx;
	}

	.text_14 {
		margin-right: 8rpx;
	}

	.text_15 {
		margin-right: 8rpx;
	}

	.text_16 {
		margin-right: 8rpx;
	}

	.text_17 {
		margin-right: 12rpx;
	}

	.group_5 {
		margin-top: 84rpx;
		padding: 0 2rpx;
	}

	.group_6 {
		margin-top: 40rpx;
	}

	.image_4 {
		border-radius: 384rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.group_7 {
		margin-left: 16rpx;
	}

	.font_5 {
		font-size: 24rpx;
		line-height: 42rpx;
		color: #666e7a;
	}

	.text_18 {
		margin-top: 12rpx;
	}

	.image_5 {
		width: 68rpx;
		height: 68rpx;
	}

	.image_6 {
		margin-right: 38rpx;
	}

	.text_19 {
		margin-top: 24rpx;
		font-weight: 700;
	}

	.group_8 {
		margin-top: 44rpx;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.image_7 {
		border-radius: 376rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.image_8 {
		margin-right: 42rpx;
	}

	.group_9 {
		margin-top: 202rpx;
		padding: 0 40rpx;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.text-wrapper {
		flex: 1 1 188rpx;
		padding: 32rpx 0;
		background-color: #ffbd52;
		border-radius: 374rpx;
		height: 82rpx;
	}

	.group_10 {
		margin-top: 52rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.image_9 {
		width: 32rpx;
		height: 32rpx;
	}

	.text_20 {
		color: #0454f9;
	}
</style>

<style>

.detail_font_1 {
  font-size: 24rpx;
  line-height: 22rpx;
  color: #666e7a;
}
.section {
  padding: 22rpx 12rpx 22rpx 22rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
}
.detail_space-x-6 > view:not(:first-child),
.detail_space-x-6 > text:not(:first-child),
.detail_space-x-6 > image:not(:first-child) {
  margin-left: 12rpx;
}
.text-wrapper {
  padding: 12rpx 0;
  background-color: #4578ff;
  border-radius: 6rpx;
  width: 88rpx;
  height: 44rpx;
}
.detail_text_5 {
  color: #ffffff;
}
.detail_font_4 {
  font-size: 24rpx;
  line-height: 22rpx;
  color: #081329;
}
.detail_text_6 {
  line-height: 23rpx;
}
.detail_image_5 {
  width: 56rpx;
  height: 16rpx;
}
.detail_text_7 {
  line-height: 23rpx;
}
.detail_text_8 {
  color: #081329;
  font-size: 20rpx;
  line-height: 20rpx;
}
.detail_group_3 {
  margin-top: 42rpx;
}
.detail_image_6 {
  border-radius: 296rpx;
  width: 120rpx;
  height: 120rpx;
}
.detail_space-y-16 > view:not(:first-child),
.detail_space-y-16 > text:not(:first-child),
.detail_space-y-16 > image:not(:first-child) {
  margin-top: 32rpx;
}
.detail_group_4 {
  padding-left: 46rpx;
}
.detail_space-x-10 > view:not(:first-child),
.detail_space-x-10 > text:not(:first-child),
.detail_space-x-10 > image:not(:first-child) {
  margin-left: 20rpx;
}




.equal-division {margin-top: 28rpx;width:100%}
.equal-division-item {
	/* padding: 56rpx 0; */
	/* background-color: #0000000a; */
	border-radius: 20rpx;
	height: 208rpx;
	overflow: hidden;
}
.image_11 {height: 208rpx;}
.section_9 {flex: 1;margin-left: 8rpx;}
.space-y-26>view:not(:first-child),
.space-y-26>text:not(:first-child),
.space-y-26>image:not(:first-child) {margin-top: 52rpx;}




</style>
